<template>
  <div id="post-container">
    <div id="post-container-toolbar">
      <ArrowLeftOutlined @click="() => router.back()"></ArrowLeftOutlined>
      <h3>查看动态</h3>
    </div>
    <PostCard
      class="post-card"
      :key="postWrapper.id"
      :avater="postWrapper.postStaff.avater"
      :name="postWrapper.postStaff.name"
      :time="postWrapper.createTime"
      :update-time="postWrapper.updateTime"
      :post-message="postWrapper.message"
      :type="postWrapper.type"
      :resources="postWrapper.resources"
      :reply-count="postWrapper.replyCount"
      :like-count="postWrapper.likeCount"
      :dose-i-liked-it="postWrapper.doseILikedIt"
      @delete-post="handleDeletePost(postWrapper.id)"
      @enter-post="() => {}"
      @send-reply="() => { currentReplyReplyId = null; openReplyModal(postWrapper) }"
      @like-post="handleLikePost(postWrapper)"
      @unlike-post="handleUnlikePost(postWrapper)"
    ></PostCard>
    
    <h3 style="margin: 20px">评论</h3>
    <ReplyComponent
      :key="reply.id"
      v-for="reply in replyList"
      :avater="reply.postStaff.avater"
      :name="reply.postStaff.name"
      :message="reply.content"
      :like-count="reply.likeCount"
      :time="reply.createTime"
      :update-time="reply.createTime" 
      :reply-count="reply.replyCount"
      :dose-i-liked-it="reply.doseILikedIt"
      :parent-comment-poster-name="reply.parentReply ? reply.parentReply.postStaff.name : undefined"
      :parent-comment-message="reply.parentReply ? reply.parentReply.content : undefined"
      @like-reply="handleLikeReply(reply, ()=>{})"
      @unlike-reply="handleUnlikeReply(reply, () => {})"
      @delete-reply="handleDeleteReply(reply.id, getDeleteList(reply) , () => {}, () => {})"
      @open-reply-modal="() => { currentReplyReplyId = reply.id;openReplyModal(postWrapper); }"
    ></ReplyComponent>
    <HoverToLoadingComponent :is-fetching-list="isFetchingList" :no-more="noMore" @on-hover="fetch(postWrapper.id)"></HoverToLoadingComponent>


    <a-modal v-model:visible="isReplyModalShow" title="发布回复" :footer="null">
      <SendPostOrReplyComponent :has-operations-bar="false" place-holder="发布回复..." @on-post="({message}) => handlePostReply(currentReplyReplyId, message)"></SendPostOrReplyComponent>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import PostCard from '@/components/public/PostCard.vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import ReplyComponent from '@/components/public/ReplyComponent.vue';
import SendPostOrReplyComponent from '@/components/public/SendPostOrReplyComponent.vue';
import HoverToLoadingComponent from '@/components/public/HoverToLoadingComponent.vue';
import usePostApi from '@composable/post-api';
import useReplyApi from '@/composable/reply-api';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const currentReplyReplyId = ref(null);
const router = useRouter();

const replyList = ref([]);

const { handleDeletePost, handleLikePost, handleUnlikePost } = usePostApi();

const { openReplyModal, isReplyModalShow, handlePostReply, fetch, isFetchingList, noMore, handleDeleteReply, handleLikeReply, handleUnlikeReply } = useReplyApi(replyList, '/postreply');

const props = defineProps({
  post: {
    type: Object,
  },
});

const postWrapper = ref(props.post);

onMounted(() => {
  fetch(postWrapper.value.id);
})

const getDeleteList = (reply) => {
  if (reply.parentReply) return [postWrapper.value, reply.parentReply]
  else return [postWrapper.value]
}
</script>

<style scoped>
#post-container {
  padding-bottom: 10px;
  max-width: 600px;
  margin: 0 auto;
  background-color: white;
}
#post-container-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 15px;
}
#post-container-toolbar > h3{
  margin-left: 20px;
}
</style>